import {
    defineComponent,
    resolveComponent,
    type PropType,
    ref
} from 'vue'

import { type formField } from "../type";
import { Form, Row, Col } from "ant-design-vue"
import FormProps from "ant-design-vue/es/form"
import FormItem from './FormItem';
import FormBtnQuery from './FormBtn_Query.vue'
import FormBtnSubmit from './FormBtn_Submit.vue'

export default defineComponent({
    name: 'wt_form',
    components: {
        FormItem,
        FormBtnQuery,
        FormBtnSubmit
    },
    props: {
        type: { type: String, default: 'query', required: false }, //query 查询表单 ，submit 信息输入表单
        dataObj: { type: Object, default: () => ({}), required: false }, //表单 数据对象
        formSetting: { type: FormProps }, //表单设置信息
        fieldSetting: { type: Array as PropType<Array<formField>>, required: true }, //表单输入项输入信息
        defaultShowCount: { type: Number, default: 3 } //表单项布局
    },

    setup(props, ctx) {
        /**表单项数量 */
        const fieldCount = props.fieldSetting.length
        /**表单项布局宽度 */
        let colSpan = Math.floor(24 / props.defaultShowCount)
        /**是否展开所有输入项 */
        const showAll = ref(false)
        // /**表单对象 */
        // const formRef = ref()

        /**表单按钮组件类型 */
        let formBtnType = 'FormBtnQuery'

        /**表单按钮是否只显示在底部 */
        let btnBottom = false
        //如果是信息提交表单，提交按钮只显示在表单底部，没有展开按钮
        if (fieldCount >= props.defaultShowCount || props.type === 'query') {
            btnBottom = true
        }
        if (props.type === 'submit') {
            formBtnType = 'FormBtnSubmit'
        }

        /**表单输入项展开变更事件 */
        const changeExpand = (expand: boolean) => {
            showAll.value = expand
        }
        /**表单输入项清空事件 */
        const resetFields = () => {
            // formRef.value.resetFields()
        }
        /**表单输入项提交事件 */
        const formSubmit = () => { }

        return () => {
            const formBtnElement = resolveComponent(formBtnType);
            return (
                <Form model={props.dataObj} {...props.formSetting} >
                    <Row gutter={16}>
                        {props.fieldSetting.map((field, index) => {
                            return (<Col span={colSpan} v-show={index < props.defaultShowCount || showAll.value}>
                                <FormItem dataObj={props.dataObj} fieldConfig={field}></FormItem>
                            </Col>)
                        })}
                        {btnBottom === false ? (<FormBtnQuery span={colSpan} onChangeExpand={changeExpand} onResetFields={resetFields} onFormSubmit={formSubmit}></FormBtnQuery>) : undefined}
                    </Row>
                    {btnBottom ? (<Row>
                        <formBtnElement span={24} onChangeExpand={changeExpand} onResetFields={resetFields} onFormSubmit={formSubmit}></formBtnElement>
                    </Row>) : undefined}
                </Form>

            )
        }

    },

})
